<template>
  <div class="demo" :class="[`${props.setnum}demo`]">
    <div class="indemo">
      <div class="demo1" :class="[`${props.setnum}demo1`]">
        <a href="." v-for="item in props.list"><img :src="item" alt=""></a>
      </div>
      <div class="demo2" :class="[`${props.setnum}demo2`]"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, reactive, watch, ref, onMounted ,defineProps} from "vue";
let props = defineProps(['setnum','list'])
let xTrans: any = reactive({ value: [] });
onMounted(() => {
 
  window.setTimeout(()=>{
    console.log(props.setnum)
  var speed = 20;
  var tab = document.getElementsByClassName(`${props.setnum}demo`)[0];
  var tab1 = document.getElementsByClassName(`${props.setnum}demo1`)[0];
  var tab2 = document.getElementsByClassName(`${props.setnum}demo2`)[0];
  tab2.innerHTML = tab1.innerHTML;

  function Marquee() {
    if (tab2.offsetWidth - tab.scrollLeft <= 0)
      tab.scrollLeft -= tab1.offsetWidth;
    else {
      tab.scrollLeft++;
    }
  }
  var MyMar = setInterval(Marquee, speed);
  tab.onmouseover = function () {
    clearInterval(MyMar);
  };
  tab.onmouseout = function () {
    MyMar = setInterval(Marquee, speed);
  };
  },props.setnum%2==0?1:2500)

});


</script>

<style lang="scss" scoped>
.demo {
  overflow: hidden;
  width: 1200px;
  height: 90px;
}

.demo img {
  width: 100%;
  height: 100%;
}
.demo a {
  width: 220px;
  height: 90px;
  background: white;
  border-radius: 10px 10px 10px 10px;
  margin-right: 20px;
  display: inline-block;
}

.indemo {
  float: left;
  width: 800%;
}

.demo1 {
  float: left;
}

.demo2 {
  float: left;
}
</style>
